<template>
    <div id="dataStatistics">
        <el-breadcrumb class="common-bread">
            <el-breadcrumb-item>体测数据统计</el-breadcrumb-item>
            <span class="phy-standard fr" @click="checkStandard()">体测标准</span>
        </el-breadcrumb>

        <div class="statis-info">
            <el-row type="flex" justify="space-around" style="line-height:20px;">
                <el-col :span="10">
                    <img src="../../../assets/finish.png">
                    <div class="stu-count">
                        <div class="stu-count-msg">全部测完人数</div>
                        <div class="stu-count-num" style="color: #0398FF;">{{maleTotalCount + femaleTotalCount}}</div>
                    </div>
                    <span style="line-height:80px;vertical-align:top;">（男生：{{maleTotalCount}} 女生：{{femaleTotalCount}}）</span>
                </el-col>
                <el-col :span="5">
                    <img src="../../../assets/no_finish.png">
                    <div class="stu-count">
                        <div class="stu-count-msg">部分测完人数</div>
                        <div class="stu-count-num">{{havePartScorePeopleCount}}</div>
                    </div>
                </el-col>
                <el-col :span="5">
                    <img style="padding:7px;" src="../../../assets/school.png">
                    <div v-if="user.userType<2" class="stu-count">
                        <div class="stu-count-msg">学校数</div>
                        <div class="stu-count-num" style="color: #94C23F;">{{schoolTotalCount}}</div>
                    </div>
                    <div v-else class="stu-count">
                        <div class="stu-count-msg">班级数</div>
                        <div class="stu-count-num" style="color: #94C23F;">{{classTotalCount}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="contentBox">

            <div class="list">
                <div class="total-data fl">
                    <div class="total-data-title">总体成绩</div>
                    <vue-highcharts :options="options_total" ref="pieChart_total" style="height: 360px;padding: 20px 20px 0px;"></vue-highcharts>
                    <div class="nodata1" v-if="showInfo1">无数据</div>
                </div>
                <div class="everyone-data fr">
                    <div class="total-data-title">
                        <span>{{schoolOrGrade}}</span>
                        <el-checkbox-group v-if="!showInfo2" v-model="checkList" :min="1" style="display:inline-block;margin-left:60px;">
                            <el-checkbox class="check-item1" label="优秀率" style="color:#FFC12B"></el-checkbox>
                            <el-checkbox class="check-item2" label="良好率" style="color:#0398FF"></el-checkbox>
                            <el-checkbox class="check-item3" label="及格率" style="color:#86C88E"></el-checkbox>
                            <el-checkbox class="check-item4" label="不及格率" style="color:#FF5151"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <vue-highcharts :options="options_every" ref="pieChart_every" style="height: 360px;padding: 20px 20px 0px;"></vue-highcharts>
                    <div class="nodata1" v-if="showInfo2">无数据</div>
                </div>
            </div>

            <div class="ranking">
                <el-row type="flex" justify="space-around">
                    <el-col :span="8" class="rank-back">
                        <div class="rank-grid-content" style="color:#FFC12B;">优秀率Top5 班级</div>
                        <el-row v-for="(item,index) in exclentClass" :key="index" :gutter="10" class="padd10">
                            <el-col :span="3">
                                <div v-if="index< 3" class="grid-content rank-level">
                                    <!-- <img :src="'../../../assets/rank_'+(index+1)+'.png'" alt=""> -->
                                    <img v-if="index==0" src="../../../assets/rank_1.png">
                                    <img v-if="index==1" src="../../../assets/rank_2.png">
                                    <img v-if="index==2" src="../../../assets/rank_3.png">
                                </div>
                                <div v-else class="grid-content rank-level">{{index + 1}}</div>
                            </el-col>
                            <template v-if="user.userType<2">
                                <el-col :span="8">
                                    <span class="grid-content">{{item.schoolName}}</span>
                                </el-col>
                                <el-col :span="8">
                                    <small class="rank-school">{{item.className}}</small>
                                </el-col>
                            </template>
                            <template v-else>
                                <el-col :span="16">
                                    <span class="grid-content">{{item.className}}</span>
                                </el-col>
                            </template>
                            <el-col :span="5">
                                <div class="grid-content grablue">{{(item.exclentRate/100).toFixed(1)}}%</div>
                            </el-col>
                        </el-row>
                        <div class="noratedata" v-if="exclentClass.length == 0">暂无排行信息</div>
                    </el-col>
                    <el-col :span="8" class="rank-back">
                        <div class="rank-grid-content" style="color:#FF5151;">不及格率Top5 班级</div>
                        <el-row v-for="(item,index) in nopassClass" :key="index" :gutter="10" class="padd10">
                            <el-col :span="3">
                                <div class="grid-content rank-level">{{index + 1}}</div>
                            </el-col>
                            <template v-if="user.userType<2">
                                <el-col :span="8">
                                    <span class="grid-content">{{item.schoolName}}</span>
                                </el-col>
                                <el-col :span="8">
                                    <small class="rank-school">{{item.className}}</small>
                                </el-col>
                            </template>
                            <template v-else>
                                <el-col :span="16">
                                    <span class="grid-content">{{item.className}}</span>
                                </el-col>
                            </template>
                            <el-col :span="5">
                                <div class="grid-content grablue">{{(item.nopassRate/100).toFixed(1)}}%</div>
                            </el-col>
                        </el-row>
                        <div class="noratedata" v-if="nopassClass.length == 0">暂无排行信息</div>
                    </el-col>
                    <el-col :span="8" class="rank-back">
                        <div class="rank-grid-content" style="color:#FF5151;">不及格率Top5 项目</div>
                        <el-row v-for="(item,index) in nopassItem" :key="index" :gutter="10" class="padd10">
                            <el-col :span="4">
                                <div class="grid-content rank-level">{{index + 1}}</div>
                            </el-col>
                            <el-col :span="14">
                                <div class="grid-content">{{textNameFormat.get(item.testNameType)}}</div>
                            </el-col>
                            <el-col :span="6">
                                <div class="grid-content grablue">{{(item.rate/100).toFixed(1)}}%</div>
                            </el-col>
                        </el-row>
                        <div class="noratedata" v-if="nopassItem.length == 0">暂无排行信息</div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                exclentClass: [],
                nopassClass: [],
                nopassItem: [],
                textNameFormat: new Map([
                    [0, '总成绩'],
                    [1, 'BMI'],
                    [2, '肺活量'],
                    [3, '50米跑'],
                    [4, '立定跳远'],
                    [5, '坐位体前屈'],
                    [6, '一分钟仰卧起坐'],
                    [7, '引体向上'],
                    [8, '1000米跑'],
                    [9, '800米跑'],
                    [12, '8*50米往返跑'],
                    [13, '一分钟跳绳']
                ]),
                checkList: ['优秀率', '及格率'],
                maleTotalCount: 0,
                femaleTotalCount: 0,
                schoolTotalCount: 0,
                classTotalCount: 0,
                havePartScorePeopleCount: 0,
                physicalName: '',
                schoolOrGrade: '',
                exclentColor: '#ff9c17',
                goodColor: '#69C0FF',
                passColor: '#86C88E',
                nopassColor: '#FF7875',
                pointWidth: 20,
                showInfo1: false,
                showInfo2: false,
                options_every: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'column'
                    },
                    title: { text: null },
                    credits: { enabled: false },
                    xAxis: { categories: [] },
                    yAxis: {
                        gridLineWidth: 0,
                        title: null,
                        showLastLabel: false,
                        tickPositions: [0, 25, 50, 75, 100, 120]
                    },
                    colorByPoint: true,
                    plotOptions: {
                        column: {
                            shadow: false,
                            dataLabels: {
                                enabled: true,
                                allowOverlap: false // 允许数据标签重叠
                            },
                            groupPadding: 0.1
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:{point.color};">{point.y:.1f}%</span>',
                                useHTML: true
                            }
                        }
                    },
                    tooltip: { headerFormat: "", pointFormat: "<b>{series.name}</b>  {point.per}人" },
                    series: [],
                    legend: {
                        enabled: false // 让下面的series name 不显示
                    }
                },
                options_total: {
                    chart: {
                        plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
                        type: 'column'
                    },
                    title: null,
                    credits: { enabled: false },
                    xAxis: { type: 'category', },
                    yAxis: {
                        title: null,
                        gridLineWidth: 0,
                        showLastLabel: false,
                        tickPositions: [0, 25, 50, 75, 100, 120]
                    },
                    colorByPoint: true,
                    // colors: ['#FFC12B', '#0398FF', '#86C88E', '#FF5151'],
                    plotOptions: {
                        column: {
                            dataLabels: {
                                enabled: true,
                                allowOverlap: true // 允许数据标签重叠
                            }
                        },
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '<span style="color:{point.color}">{point.y:.1f}%</span>',
                                useHTML: true
                            }
                        }
                    },
                    tooltip: { headerFormat: "", pointFormat: "<b>{point.name}</b>：{point.per}人" },
                    series: [],
                    legend: {
                        enabled: false // 让下面的series name 不显示
                    }
                },
            };
        },
        watch: {
            checkList(cur, pre) {
                if (cur.length > pre.length) {
                    // 增加
                    cur.forEach(item => {
                        if (pre.indexOf(item) < 0) {
                            this.addMySeries(item)
                        }
                    })
                } else {
                    // 减少
                    pre.forEach(item => {
                        if (cur.indexOf(item) < 0) {
                            this.removeMySeries(item)
                        }
                    })
                }
            }
        },
        mounted() {
            this.schoolOrGrade = this.user.userType < 2 ? '各学校成绩情况' : '各年级成绩情况'
            this.getPhysicalData();
            this.getPhysicalRankData();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            addMySeries(name) {
                let data = this.$refs.pieChart_every.getChart();
                data.series.forEach(item => {
                    if (item.name == name) return item.show();
                })
            },
            removeMySeries(name) {
                let data = this.$refs.pieChart_every.getChart();
                data.series.forEach(item => {
                    if (item.name == name) return item.hide();
                })
            },
            // 体测标准
            checkStandard() {
                location.href = '/#/physicalStandard'
            },

            // 获取基础数据数据
            getPhysicalData() {

                this.$axios.post('/jlp/physical/statistics/school/dimension', {

                }).then(response => {
                    if (response.data.error == 10000) {
                        let pieChart_total = this.$refs.pieChart_total; // 总
                        let pieChart_every = this.$refs.pieChart_every; // 学校
                        pieChart_total.removeSeries();
                        pieChart_every.removeSeries();

                        // 请求成功
                        let proData = response.data.data;

                        if (proData) {
                            this.maleTotalCount = proData.maleTotalCount;
                            this.femaleTotalCount = proData.femaleTotalCount;
                            this.schoolTotalCount = proData.schoolTotalCount || 0;
                            this.classTotalCount = proData.classTotalCount || 0;
                            this.physicalName = proData.physicalName;
                            this.havePartScorePeopleCount = proData.havePartScorePeopleCount;

                            // 总数据
                            let exclent = proData.everyLevelCount.exclent * 1;
                            let good = proData.everyLevelCount.good * 1 + exclent;
                            let pass = proData.everyLevelCount.pass * 1 + good;
                            let nopass = proData.everyLevelCount.nopass * 1;

                            if (pass + nopass < 1) {
                                // 无体测成绩
                                this.showInfo1 = true;
                            } else {
                                this.showInfo1 = false;
                                pieChart_total.addSeries({
                                    data: [
                                        { name: '优秀率', color: this.exclentColor, y: ((exclent / (pass + nopass)) * 100).toFixed(2) * 1, per: exclent },
                                        { name: '良好率', color: this.goodColor, y: ((good / (pass + nopass)) * 100).toFixed(2) * 1, per: good },
                                        { name: '及格率', color: this.passColor, y: ((pass / (pass + nopass)) * 100).toFixed(2) * 1, per: pass },
                                        { name: '不及格率', color: this.nopassColor, y: ((nopass / (pass + nopass)) * 100).toFixed(2) * 1, per: nopass },
                                    ],
                                    borderRadius: 10,
                                    pointWidth: 20
                                });
                            }
                            // 每个学校或年级的数据
                            this.drawList(proData.schoolRank, proData.gradeRank, pieChart_every)
                        }
                    } else {
                        this.showInfo1 = true;
                        this.showInfo2 = true;
                    }
                }).catch(() => {
                    this.showInfo1 = true;
                    this.showInfo2 = true;
                })
            },

            // 列表图形
            drawList(schoolRank, gradeRank, pieChart_every) {
                // 优秀的
                let exclentArr = [], goodArr = [], passArr = [], nopassArr = [];

                let schoolAndGradeList = [];
                if (this.user.userType < 2 && schoolRank && schoolRank.length > 0) {  // 学校列表
                    this.showInfo2 = false;
                    this.schoolOrGrade = '各学校成绩情况';
                    schoolRank.forEach(item => {
                        schoolAndGradeList.push({ ...item, name: item.name })
                    })
                } else if (gradeRank && gradeRank.length > 0) {  // 年级列表
                    this.schoolOrGrade = '各年级成绩情况';
                    this.showInfo2 = false;
                    gradeRank.forEach(item => {
                        schoolAndGradeList.push({ ...item, name: this.$util.gradeFormat(item.grade) })
                    })
                } else {
                    this.showInfo2 = true;
                }
                // 对学校或年级列表数据处理
                schoolAndGradeList.forEach(item => {
                    let exclent = item.exclent * 1;
                    let good = item.good * 1 + exclent;
                    let pass = item.pass * 1 + good;
                    let nopass = item.nopass * 1;
                    this.options_every.xAxis.categories.push(item.name);
                    exclentArr.push({ y: (pass + nopass) > 0 ? ((exclent / (pass + nopass)) * 100).toFixed(2) * 1 : 0, per: exclent });
                    goodArr.push({ y: (pass + nopass) > 0 ? ((good / (pass + nopass)) * 100).toFixed(2) * 1 : 0, per: good });
                    passArr.push({ y: (pass + nopass) > 0 ? ((pass / (pass + nopass)) * 100).toFixed(2) * 1 : 0, per: pass });
                    nopassArr.push({ y: (pass + nopass) > 0 ? ((nopass / (pass + nopass)) * 100).toFixed(2) * 1 : 0, per: nopass })
                })

                pieChart_every.addSeries(
                    { color: this.exclentColor, name: '优秀率', data: exclentArr, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                )
                pieChart_every.addSeries(
                    { color: this.goodColor, name: '良好率', data: goodArr, visible: false, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                )
                pieChart_every.addSeries(
                    { color: this.passColor, name: '及格率', data: passArr, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                )
                pieChart_every.addSeries(
                    { color: this.nopassColor, name: '不及格率', data: nopassArr, visible: false, borderRadius: (this.pointWidth / 2), maxPointWidth: this.pointWidth }
                )
            },

            // 获取排行数据
            getPhysicalRankData() {

                this.exclentClass = [];  // 优秀率班级
                this.nopassClass = [];   // 不及格率班级
                this.nopassItem = [];    // 不及格率项目
                this.$axios.post('/jlp/physical/statistics/top/dimension', {

                }).then(response => {
                    if (response.data.error == 10000) {
                        // 请求成功
                        let proData = response.data.data;
                        if (proData) {
                            this.exclentClass = [...proData.exclentClass];
                            this.nopassClass = [...proData.nopassClass];
                            this.nopassItem = [...proData.nopassItem];
                        }
                    }
                })
            }

        }
    };
</script>

<style>
    #dataStatistics .contentBox {
        min-width: 1060px;
    }

    #dataStatistics .list {
        overflow: hidden;
        margin-bottom: 20px;
    }

    #dataStatistics .total-data {
        position: relative;
        width: 400px;
        margin-right: 40px;
        background-color: #fff;
    }

    /* checkBox */
    #dataStatistics .check-item1 .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #FFC12B;
    }

    #dataStatistics .check-item2 .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #0398FF;
    }

    #dataStatistics .check-item3 .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #86C88E;
    }

    #dataStatistics .check-item4 .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #FF5151;
    }

    #dataStatistics .everyone-data {
        position: relative;
        width: calc(100% - 440px);
    }

    #dataStatistics .nodata1 {
        z-index: "10000";
        opacity: "1";
        position: absolute;
        color: #a0a0a0;
        top: 40%;
        left: 50%;
    }

    #dataStatistics .statis-info {
        background-color: #fff;
        min-width: 1060px;
        padding-top: 10px;
        margin-left: 32px;
        margin-right: 32px;
        pointer-events: none;
        cursor: default;
    }

    #dataStatistics .statis-info img {
        width: 80px;
        height: 80px;
    }

    #dataStatistics .ranking {
        padding: 0;
        text-align: center;
        background-color: #f6f8f8;
    }

    #dataStatistics .rank-back {
        background-color: #fff;
    }

    #dataStatistics .rank-grid-content {
        margin-bottom: 20px;
    }

    #dataStatistics .grid-content {
        line-height: 40px;
        padding: 0;
    }

    #dataStatistics .padd10 {
        margin: 0 !important;
        line-height: 40px;
        border-right: 1px solid #ddd;
        text-align: left;
    }

    #dataStatistics .rank-back:last-child .padd10 {
        border-right: none;
    }

    #dataStatistics .rank-level {
        display: inline-block;
        width: 30px;
        height: 30px;
        color: #0398FF;
        text-align: center;
        line-height: 30px;
    }

    #dataStatistics .rank-school {
        color: #a0a0a0;
    }

    #dataStatistics .stu-count {
        display: inline-block;
        padding-left: 5px;
        line-height: 36px;
        vertical-align: top;
    }

    #dataStatistics .stu-count-msg {
        font-family: 'PingFangSC-Regular';
        font-size: 18px;
        color: #707070;
    }

    #dataStatistics .stu-count-num {
        font-family: 'PingFangSC-Medium';
        font-size: 28px;
        color: #75A8FF;
    }

    #dataStatistics .grablue {
        color: #6b94ff;
    }

    #dataStatistics .noratedata {
        line-height: 80px;
    }

    #dataStatistics .rank-level img{
        width: 24px;
        height: 24px;
        position: relative;
        top: 6px;
    }
</style>